<template>
  <div id="main">
    <div class="bingtu">
      <div class="box">
        <div class="chart">
          <canvas id="mountNode"></canvas>
        </div>
      </div>
      <div class="box">
        <div class="chart">
          <canvas id="container" height="180" width="327"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2/lib/index-all'
export default {
  components: {},
  data() {
    return {}
  },
  mounted() {
    // this.showChart()
    this.showChart2()
  },
  methods: {
    // 图表数据初始化
    showChart() {
      var data = [
        {
          name: '股票类',
          percent: 83.59,
          a: '1'
        },
        {
          name: '债券类',
          percent: 2.17,
          a: '1'
        },
        {
          name: '现金类',
          percent: 14.24,
          a: '1'
        }
      ]

      var map = {}
      data.map(function(obj) {
        map[obj.name] = obj.percent + '%'
      })

      var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio,
        padding: [20, 'auto']
      })
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            return val + '%'
          }
        }
      })
      chart.tooltip(false)
      chart.legend({
        position: 'right',
        itemFormatter: function itemFormatter(val) {
          return val + '    ' + map[val]
        }
      })
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.7,
        radius: 0.85
      })
      chart.axis(false)
      chart
        .interval()
        .position('a*percent')
        .color('name', ['#FE5D4D', '#3BA4FF', '#737DDE'])
        .adjust('stack')

      chart.guide().html({
        position: ['50%', '45%'],
        html:
          '<div style="width: 250px;height: 40px;text-align: center;">' +
          '<div style="font-size: 16px">总资产</div>' +
          '<div style="font-size: 24px">133.08 亿</div>' +
          '</div>'
      })
      chart.render()
    },
    // 图表数据初始化
    showChart2() {
      var data = [
        {
          count: 2,
          item: '干燥' + '：',
          const: 'const'
        },
        {
          count: 2,
          item: '潮湿' + '：',
          const: 'const'
        }
      ]

      var chart = new F2.Chart({
        id: 'container',
        pixelRatio: window.devicePixelRatio
      })

      chart.source(data)
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.55,
        radius: 0.75
      })
      chart.axis(false)
      chart.legend(false)
      chart.tooltip(false)
      chart.guide().html({
        position: ['50%', '50%'],
        html:
          '<div style="width: 100px;height: 20px;text-align: center;line-height: 20px;" id="textContent"></div>'
      })
      // 配置文本饼图
      chart.pieLabel({
        sidePadding: 75,
        label1: function label1(data) {
          return {
            text: data.item,
            fill: '#808080'
          }
        },
        label2: function label2(data) {
          return {
            fill: '#000000',
            text: data.count + '天',
            fontWeight: 500,
            fontSize: 10
          }
        }
      })
      chart
        .interval()
        .position('const*count')
        .color('item', ['#FFAA10', '#FF6A4C'])
        .adjust('stack')
      chart.render()

      chart.get('canvas').draw()
    }
  }
}
</script>

<style></style>
